<template>
  <div id="app">
      <section class="menu-block">
        <h2>获取剪贴板信息</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getClipboardData}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getClipboardDataClick">获取剪贴板信息</van-button>
            <code>剪贴板内容：{{ clipboardData1 }}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>复制到系统剪贴板</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{setClipboardData}}</code>
            </pre>
            <van-cell-group>
                <van-field v-model="dataToSave" placeholder="请输入若干字符" />
            </van-cell-group>
            <van-button size="large" type="primary" @click="setClipboardDataClick">点击复制到系统剪贴板</van-button>
            <code>按钮点击之后可在上一个api查看效果</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取电池状态</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getBatteryInfoCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getBatteryInfoClick">点击获取电池状态</van-button>
            <code>电池信息:{{batteryInfo}}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>获取网络类型</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{getNetworkTypeCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="getNetworkTypeClick">点击获取网络类型</van-button>
            <code>网络类型:{{networkType}}</code>
        </div>
      </section>
      <section class="menu-block">
        <h2>监听网络变化</h2>
        <div class="menu-block">
            <pre v-highlightA>
                <code>{{onNetworkStatusChangeCode}}</code>
            </pre>
            <van-button size="large" type="primary" @click="onNetworkStatusChangeClick">点击开始监听网络</van-button>
            <code>网络状态:[isConnect:{{networkStatus.isConnect}} type:{{networkStatus.type}}]</code>
        </div>
      </section>
  </div>
</template>

<script>
import {Button, CellGroup, Cell, Field, Notify} from 'vant'
import {device} from 'MTHybrid'

export default {
    data () {
        return {
            getClipboardData: 'import {device} from \'fzHybrid\'\n...\nvar data = device.getClipboardData();',
            setClipboardData: 'import {device} from \'fzHybrid\'\n...\ndevice.setClipboardData("data to save");',
            dataToSave: '',
            clipboardData1: '',
            clipboardData2: '',
            getBatteryInfoCode: 'import {device} from \'fzHybrid\'\n...\n//level:表示电池当前电量;inCharging:true表示设备正在充电\nvar info = device.getBatteryInfo()',
            batteryInfo: '',
            getNetworkTypeCode: 'import {device} from \'fzHybrid\'\n...\n//返回结果:wifi wifi网络；cellular 蜂窝网络；unknown Android下不常见的网络类型;none 无网络\nvar info = device.getNetworkType()',
            networkType: '',
            onNetworkStatusChangeCode: 'import {device} from \'fzHybrid\'\n...\n//参数，function({isConnect:true/false,type:wifi/cellular}){}\ndevice.onNetworkStatusChange(function (data) {\n    console.log(data)\n})',
            networkStatus: {}
        }
    },
    methods: {
        getClipboardDataClick () {
            var data = device.getClipboardData()
            console.log(data)
            this.clipboardData1 = data
        },
        setClipboardDataClick () {
            device.setClipboardData(this.dataToSave)
            Notify({
                message: '复制成功',
                duration: 1000,
                background: '#4b0'
            })
        },
        getBatteryInfoClick () {
            var info = device.getBatteryInfo()
            this.batteryInfo = JSON.stringify(info)
        },
        getNetworkTypeClick () {
            var info = device.getNetworkType()
            this.networkType = info
        },
        onNetworkStatusChangeClick () {
            Notify({
                message: '开始监听网络变化',
                duration: 1000,
                background: '#1989fa'
            })
            var thiz = this
            device.onNetworkStatusChange(function (data) {
                thiz.networkStatus = data
            })
        }
    },
    components: {
        [Button.name]: Button,
        [CellGroup.name]: CellGroup,
        [Cell.name]: Cell,
        [Field.name]: Field,
        [Notify.name]: Notify
    }
}
</script>

<style>
    @import '../../../static/css/index.css';
    .menu-block {
        padding: 0 0.2rem
    }
    h2 {
        margin-block-start: 0.83em;
        margin-block-end: 0.83em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        margin: 0;
        /* font-weight: 200; */
        font-size: 18px;
        color: rgba(69,90,100,.6);
        padding: 20px 15px 15px;
    }
</style>
